import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const arrayList = [
  {
    id: 1,
    name: 'The Cure',
  },
  {
    id: 2,
    name: 'Poker Face',
  },
  {
    id: 3,
    name: 'Bad Romance',
  },
  {
    id: 4,
    name: 'Telephone',
  },
  {
    id: 5,
    name: 'Just Dance',
  },
  {
    id: 6,
    name: 'Perfect illusion',
  }
]
function Header(){
  return <>
  <div className="singer">
    <span>&lt;</span>
    <span>Lady Gaga</span>
  </div>
  </>
}

function MusicList(){
  return<>
  <div className="titleList">
    <span>Playerlist</span>
    <img src="/0701homework/add.png" alt="" />
  </div>
  <div className='line'></div>
  </>
}

function List(){
return <>
<div className="listItem">
   {arrayList.map((item)=>(
  <ul>
  <div>
      <li>{item.id}</li>
     <div className='name'>
        <div>{item.name}</div>
        <div>{item.name}</div>
     </div>
  </div>
  <li>
    <img src="/0701homework/like.png" alt="" />
  </li>
 </ul>
 ))}
</div>
</>

}


function BottomBar(){
  return <>
  <div className="bottom">
    <div className="jindu">
      
    </div>
  </div>
  </>
}

class App extends React.Component {
  render() {
    return <>
    <div className="whole">
     <Header></Header>
     <MusicList></MusicList>
     <List />
     <BottomBar></BottomBar>
    </div>
    

    </>
  }
}

root.render(
  <App />
);

